<%--
  Created by IntelliJ IDEA.
  User: wangqingbo
  Date: 2023/10/26
  Time: 16:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
    <!-- Bootstrap依赖jQuery，要把jQuery的包放在前面引用 -->
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>
    <title>项目列表</title>
    <script type="text/javascript">
        $(function (){
            //弹窗
          //alert("页面加载");
          // 控制台打印
          //console.log("页面加载");
          // 初始化数据，页面加载成功后，调用后台数据
          initPrjData();
        });
    // 初始化数据
    function initPrjData(prjName,prjCode,currentPage,pageSize)
    {
        /**
         url:发送请求地址。
         data:待发送 Key/value 参数。
         callback:发送成功时回调函数。
         type:返回内容格式，xml, html, script, json, text, _default。
         */
        $.post("getProjectInfoByParamsPage",
            {"projectName":prjName,"projectCode":prjCode,"currentPage":currentPage,"pageSize":pageSize},
            function(data){
            // 清除缓存数据
            $(".trPrjData").remove();
             //console.log(data);
              // 循环数据，绑定到表格上
              // each()函数有两个参数，i：数据的下标，e：数据对象
              $(data.list).each(function (i,e){
                  //console.log(e.fileList);
                  var tr1="<tr class='trPrjData'>";
                  // 电压等级
                  var vol = e.voltage;
                  if (vol != null && vol != "")
                  {
                      // 去除电压等级后面的字母
                      var volNum = vol.substring(0,3);
                      //console.log("电压等级：" + volNum);
                      if (parseInt(volNum) < 200)
                      {
                          tr1="<tr class='trPrjData danger'>";
                      }
                  }

                  // 项目名称
                  var td1 = "<td>" + e.projectName + "</td>";
                  // 项目编码
                  var td2 = "<td>" + e.projectCode + "</td>";
                  // 电压等级
                  var td3 = "<td>" + e.voltage + "</td>";
                  // 项目类型
                  var td4 = "<td>" + e.projectType + "</td>";
                  // 创建人
                  var td5 = "<td>" + e.createUser + "</td>";
                  // 创建时间
                  var td6 = "<td>" + e.createDate + "</td>";
                  var files = "";
                  // 附件 循环
                  $(e.fileList).each(function(i,f){
                      files += "<a href='download?id="+f.id+"'>" + f.originalName + "</a><br>";
                  });

                  var td61 = "<td>" + files + "</td>";
                  // 操作
                  var td7 = "<td><a href='getProjectInfoByPrjId?projectId="+e.projectId+"'>修改</a>&nbsp;&nbsp;<a href='upload.jsp?projectId="+e.projectId+"'>附件上传</a></td>";
                  var tr2 = "</tr>";
                  // 将数据绑定到表格上，先找到表格的最后一行，然后把数据绑定到最后一行的前面
                  $("tr:last").before($(tr1 + td1 + td2 + td3 + td4 + td5 + td6 + td61 + td7 + tr2));
              });
            // 分页信息，总记录数
            $("#recordCount").text(data.pageView.recordCount);
            $("#pageSize").text(data.pageView.pageSize);
            $("#pageCount").text(data.pageView.pageCount);
            $("#currentPage").text(data.pageView.currentPage);

            },
            "json");
    }
    // 搜索项目信息
    function searchPrj()
    {
        // 项目名称
        var prjName = $("#projectName").val();
        // 项目编码
        var prjCode = $("#projectCode").val();
        // alert(prjName + "," + prjCode);
        // 传递参数，调用后台数据
        initPrjData(prjName,prjCode);

    }
    // 首页
    function firstPage()
    {
        // 当前页设置为1
        // 项目名称
        var prjName = $("#projectName").val();
        // 项目编码
        var prjCode = $("#projectCode").val();
        var pageSize = $("#pageSize").text();
        initPrjData(prjName,prjCode,1,pageSize);
    }
    // 尾页
    function lastPage()
    {
       // 项目名称
        var prjName = $("#projectName").val();
        // 项目编码
        var prjCode = $("#projectCode").val();
        // 当前页设置为总页数
        var currentPage = $("#pageCount").text();
        var pageSize = $("#pageSize").text();
        initPrjData(prjName,prjCode,currentPage,pageSize);
    }
    // 上一页
    function prePage()
    {
        // 项目名称
        var prjName = $("#projectName").val();
        // 项目编码
        var prjCode = $("#projectCode").val();
        // 当前页设置为 当前页 - 1
        var currentPage = parseInt($("#currentPage").text()) - 1;

        // 如果当前页为 小于1 的数字，设置为1
        if (parseInt($("#currentPage").text()) - 1 < 1)
        {
            currentPage = "1";
        }
        var pageSize = $("#pageSize").text();
        initPrjData(prjName,prjCode,currentPage,pageSize);
    }
    // 下一页
    function nextPage()
    {
        // 项目名称
        var prjName = $("#projectName").val();
        // 项目编码
        var prjCode = $("#projectCode").val();
        // 当前页设置为 当前页 - 1
        var currentPage = parseInt($("#currentPage").text()) + 1;
        var pageCount = parseInt($("#pageCount").text());
        // 如果当前页为 大于总页数，设置为总页数
        if (parseInt(currentPage) > pageCount)
        {
            currentPage = pageCount;
        }
        var pageSize = $("#pageSize").text();
        initPrjData(prjName,prjCode,currentPage,pageSize);

    }
    </script>
</head>
<body>
<form class="form-inline">
    <div class="form-group">
        <label for="projectName">项目名称</label>
        <input type="text" class="form-control" id="projectName" placeholder="请输入项目名称">
    </div>
    <div class="form-group">
        <label for="projectCode">项目编码：</label>
        <input type="text" class="form-control" id="projectCode" placeholder="请输入项目编码">
    </div>
    <div class="form-group">
        <label for="projectCreateDate">创建时间：</label>
        <input type="text" class="form-control" id="projectCreateDate" placeholder="请选择时间" readonly>
    </div>
    <button type="button" onclick="searchPrj()">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>搜索
    </button>
</form>
<script type="text/javascript">
    $("#projectCreateDate").datetimepicker({
        format: 'yyyy-mm-dd hh:ii:ss',
        minView: 0,
        autoclose: true,
        language:'zh-CN',
        todayBtn:true
    });
</script>
项目列表：<br>
<table class="table table-hover table-striped">
    <tr>
        <td>项目名称</td>
        <td>项目编码</td>
        <td>电压等级</td>
        <td>项目类型</td>
        <td>创建人</td>
        <td>创建时间</td>
        <td>附件</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>共<span id="recordCount"></span>条</td>
        <td>每页显示<span id="pageSize"></span>条</td>
        <td>共<span id="pageCount"></span>页</td>
        <td>当前第<span id="currentPage"></span>页</td>
        <td><a href="javascript:void(0)" onclick="firstPage()">首页</a><a href="javascript:void(0)" onclick="lastPage()">尾页</a></td>
        <td colspan="2"><a href="javascript:void(0)" onclick="prePage()">上一页</a><a href="javascript:void(0)" onclick="nextPage()">下一页</a></td>
    </tr>
</table>
</body>
</html>
